<template>
    <div class="View">
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_0') }}
            </div>
            <!-- <el-date-picker type="month" v-model="inspRes.from" :format="format" placeholder=" " class="picker">
            </el-date-picker> -->
            <el-date-picker v-model="inspRes.form" type="month" :format="format" :value-format="format" placeholder=" "
                class="ipt picker">
            </el-date-picker>
            <span style="margin: 0 10px;">~</span>
            <el-date-picker v-model="inspRes.to" type="month" :format="format" :value-format="format" placeholder=" "
                class="ipt picker">
            </el-date-picker>
            <!-- <el-date-picker type="month" v-model="inspRes.to" :format="format" placeholder=" " class="picker">
            </el-date-picker> -->
        </div>

        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_1') }}
            </div>
            <div style="border: 1px solid #DCDFE6; width: 380px;height: 32px;display: flex;align-items: center;">
                <el-radio-group v-model="inspRes.objData">
                    <el-radio :label="1" style="margin:0 45px 0 15px">{{ $t('message.homeExt.tab2.radio_1')
                        }}</el-radio>
                    <el-radio :label="2">{{ $t('message.homeExt.tab2.radio_2') }}</el-radio>
                </el-radio-group>
            </div>
        </div>

        <div class="" style="padding-right: 10px;padding-left: 16px;margin: 7px 0;">
            <hr style="width:100%;border-color: rgba(255, 255, 255, .8);" />
        </div>

        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_2') }}
            </div>
            <el-input class="ipt" v-model="inspRes.lineNo" @input="inspRes.lineNo = $setMaxLength(inspRes.lineNo, 20)"
                :disabled="!isShow"></el-input>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_3') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.ispClsCode" placeholder=" "
                @change="$emit('getExtCodSourceComboxApi', false, 'tab2')">
                <el-option v-for="item in inspResCom.ispClsList" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_4') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.ispWayCode" placeholder=" ">
                <el-option v-for="item in inspResCom.ispWayList" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>

        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_5') }}
            </div>
            <el-input class="ipt" v-model="inspRes.ispRes"
                @input="inspRes.ispRes = $setMaxLength(inspRes.ispRes, 20)"></el-input>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_6') }}
            </div>
            <el-input class="ipt" v-model="inspRes.countermeasures"
                @input="inspRes.countermeasures = $setMaxLength(inspRes.countermeasures, 20)"></el-input>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_7') }}
            </div>
            <el-input class="ipt" v-model="inspRes.nextAnnouncement"
                @input="inspRes.nextAnnouncement = $setMaxLength(inspRes.nextAnnouncement, 20)"></el-input>
        </div>

        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_8') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.ispRstCode" placeholder=" ">
                <el-option v-for="item in inspResCom.ispRstList" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_9') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.dpsTypeCode" placeholder=" ">
                <el-option v-for="item in inspResCom.dpsTypeList" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>


        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_10') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.rangeCode" placeholder=" " style="width:130px;">
                <el-option v-for="item in inspResCom.rangeList" :key="item.key" :label="item.key" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="ipt right" style="width:230px;margin-left: 20px;" v-model="inspRes.corrDepth"
                @input="inspRes.corrDepth = $setMyNum(inspRes.corrDepth, '3 - 2')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_11') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.crrCode" placeholder=" " style="width:130px;">
                <el-option v-for="item in inspResCom.crrList" :key="item.key" :label="item.key" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="ipt right" style="width:230px;margin-left: 20px;" v-model="inspRes.crrStr"
                @input="inspRes.crrStr = $setMyNum(inspRes.crrStr, '3 - 2')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_12') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.rateCode" placeholder=" " style="width:130px;">
                <el-option v-for="item in inspResCom.rateList" :key="item.key" :label="item.key" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="ipt right" style="width:230px;margin-left: 20px;" v-model="inspRes.rateStr"
                @input="inspRes.rateStr = $setMyNum(inspRes.rateStr, '3 - 2')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_13') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.lifeCode" placeholder=" " style="width:130px;">
                <el-option v-for="item in inspResCom.lifeList" :key="item.key" :label="item.key" :value="item.key">
                </el-option>
            </el-select>
            <el-date-picker v-model="inspRes.lifeStr" type="month" :format="format" :value-format="format"
                placeholder=" " style="width:230px;margin-left: 20px;" class="ipt picker">
            </el-date-picker>
        </div>

        <div class="row">
            <div class="label">
                {{ $t('message.homeExt.tab2.label_14') }}
            </div>
            <el-select class="long-ipt" v-model="inspRes.coreLoopCode" placeholder=" ">
                <el-option v-for="item in inspResCom.coreLoopList" :key="item.key" :label="item.label"
                    :value="item.key">
                </el-option>
            </el-select>
        </div>
        <!-- <div class="row">
            <div class="label">
                点検実績(年)
            </div>
            <el-select class="long-ipt" v-model="inspRes.objData" placeholder=" ">
                <el-option v-for="item in inspResCom.achieveList" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div> -->

    </div>
</template>

<script>
import $ from "jquery";
export default {
    name: "RetrievalTab2",
    props: ['macStyle', 'inspRes', 'inspResCom', 'isShow'],
    data() {
        return {

            format: "yyyy-MM",

        };
    },
    components: {},
    watch: {},
    methods: {
        async save() {
            console.log(this.inspRes, '222222');
            console.log(this.inspResCom, '222222');

        },
    },
    created() { },
    mounted() {

    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.row {
    width: 100%;
    display: flex;
    // justify-content: start;
    padding: 7px 0;
    align-items: center;
    padding-left: 16px;

    .label {
        // width: 145px;
        min-width: 145px;
        height: 32px;
        display: flex;
        align-items: center;
    }

    .ipt {
        width: 380px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;

        }
    }

    .right {

        ::v-deep .el-input__inner {
            text-align: right;

        }
    }

    .long-ipt {
        width: 380px;
        height: 32px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;
        }

        ::v-deep .el-input__inner:focus {
            border: 1px solid #dcdfe6;
        }

        ::v-deep .el-input__icon {
            line-height: 32px;
            color: #909399;
        }

        ::v-deep .el-input__suffix {
            width: 32px;
            right: 0;
            background: #dee0e3;
        }
    }

    .picker {
        width: 175px;
        height: 32px;
        // margin: 0px 10px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;
        }

        ::v-deep .el-input__suffix {
            background: transparent;
        }

        ::v-deep .el-input__icon {
            line-height: 100%;
        }
    }

}
</style>